<!--网格行-->
<template>
  <div class="gantt-row">
    <template>
      <slot></slot>
    </template>
     <!--可以出发鼠标over的盒子-->
    <div class="over-box"
         :class="[
           {'over': overActive},
         ]"
         @mouseover="mouserOver">
    </div>
  </div>
</template>

<script>
export default {
  name: "GanttRow",
  props: {
    // 鼠标over状态激活
    overActive: {
      type: Boolean,
      default: false
    },
  },
  methods: {
    mouserOver() {
      if(this.overActive) {
        this.$emit('mouseOver')
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .gantt-row {
    height: 60px;
    display: flex;
    width: 100%;
    box-sizing: border-box;
    //z-index: 3;
    .over-box {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;

      &.over {
        z-index: 1000;
      }
    }
  }
</style>
